import { useState } from 'react'
import Taro from '@tarojs/taro'
import { View, Image, Text } from '@tarojs/components'
import { Popup, Picker } from '@antmjs/vantui'

import './index.less'


const WowSelectRole = props => {

  const [show, setShow] = useState(false)
  const [role, setRole] = useState('')

  const selectRole = () => {
    if(props.list instanceof Array && props.list.length > 0) {
      setShow(true)
    } else {
      Taro.navigateTo({
        url: '/task/publist/index'
      })
    }
  }

  const chooseRole = e => {
    props.onConfirm && props.onConfirm(e.detail.value)
    setShow(false)
    setRole(e.detail.value)
  }

  return (
    <View className='select-role-container'>
      <View className='select-role-box' onClick={selectRole}>
        <Image className='add-icon' src={require('../../static/images/add.png')} />
        <Text>{role || '添加角色'}</Text>
      </View>
      <Popup show={show} position='bottom' onClose={() => setShow(false)}>
        <Picker 
          onCancel={() => setShow(false)} 
          onConfirm={chooseRole} 
          showToolbar 
          title='角色名-服务器' 
          columns={props.list} 
        />
      </Popup>
    </View>
  )
}

WowSelectRole.defaultValue = {
  list: []
}

export default WowSelectRole